<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绝对定位</title>
    <style>
        

        #wrapper{
            background: #ff5000;
              text-align: center;
              width: 750px;
              margin: 0 auto;
              position: relative;
        }
        #left{
            float: left;
            background: #89c200;
            width: 100px;
        }
        #middle{
            float: left;
            background: #4a4a4a;
            width: 100px;
        }
        #right{
           float: right;
           background: #45d9f2;
            width: 100px;
        }
        #bottom{
            clear: both;
        }
    </style>
</head>
<body>
    

    

    <div id="wrapper">
        <div id="left">
            “几乎不假任何思索，我们就能想出一个快速但并不那么优雅的布局方法——使用绝对定位：首先分别为三栏指定固定的宽度，然后从页面的左上角开始为这三栏依次指定固定的位置即可。若是不考虑页脚的话，现在就算大功告成了（图3-1-6）”

            摘录来自: [美]Dave Shea　Molly E. Holzschlag. “CSS禅意花园（修订版）。” Apple Books. 
        </div>
        <div id="middle">
            “在本节开始部分Backyard的截图中可以看到，整个作品分为三栏，并带有页脚。出于对搜索引擎优化以及禁用浏览器CSS选项的用户的考虑，源代码中主要内容区域1声明在左右两栏之前——正文部分在源代码中的位置越靠前，就越会被首先下载并显示于浏览器中，那些次要的导航条和链接也不会占据下载刚开始时的那段宝贵时间。”

摘录来自: [美]Dave Shea　Molly E. Holzschlag. “CSS禅意花园（修订版）。” Apple Books. 
        </div>
        <div id="right">
            “这正是CSS浮动的本意和要点所在：若将插入到文章中的图片设置为浮动，那么图片下方的文字将自动环绕在其周围，页面上也就自然不会出现那块丑陋的空白。
            浮动的语法看似简单，但却并不那么容易完全掌握。对于上面的这个场景，CSS代码将类似如下所示：
            #photo {float: left; margin: 10px 10px 10px 0;}
            这段代码非常简单易懂，其效果也不难预测。
            采用浮动实现布局的优势在于，浮动元素仍保留在文档流中，其周围环绕的元素也都清楚它的位置。但由于不同的浏览器对浮动的支持良莠不齐，”
            
            摘录来自: [美]Dave Shea　Molly E. Holzschlag. “CSS禅意花园（修订版）。” Apple Books. 
        </div>

        <div id="bottom">
            “但页脚又该如何处理呢？由于绝对定位的三栏并不会影响到页面中其他的元素，所以页脚将忽略它们的存在，就像这三栏根本不在页面中一样。因此，在这里页脚将显示在页面第一个元素的位置上。
若仍要采用绝对定位的话，那么必须预先知道这三栏中每一栏的高度，然后再根据其中最高的一栏定位页脚。若是三栏中任意一栏中的文本长度无法确定的话，除了使用JavaScript，我们也只能放弃绝对定位的念头，转而投入到浮动布局的怀抱中。”

摘录来自: [美]Dave Shea　Molly E. Holzschlag. “CSS禅意花园（修订版）。” Apple Books. 
        </div>
    </div>

</body>
</html>